<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="注册时间">
        <el-date-picker
            v-model="formInline.date1"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始时间">
        </el-date-picker>-
        <el-date-picker
            v-model="formInline.date2"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="用户类型">
        <el-radio-group v-model="formInline.userType">
          <el-radio :label="1">乘客</el-radio>
          <el-radio :label="2">司机</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formInline.name" placeholder="请输入用户名、用户手机号查询" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findPage1">重置</el-button>
        <el-button type="primary" @click="findPage">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="序号">
      </el-table-column>
      <el-table-column
          fixed
          prop="userId"
          label="用户ID">
      </el-table-column>
      <el-table-column
          fixed
          prop="userName"
          label="用户名称">
      </el-table-column>
      <el-table-column
          prop="userPhoto"
          label="当前头像">
      </el-table-column>
      <el-table-column
          width="180px"
          prop="userPhone"
          label="用户手机号">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="userType"
          label="用户类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.userType==1" type="success">乘客</el-tag>
          <el-tag v-else-if="scope.row.userType==2" type="warning">司机</el-tag>
          <el-button v-else>
            <el-tag type="success">乘客</el-tag> <br>
            <el-tag type="warning">司机</el-tag>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
          prop="userSex"
          label="用户性别">
        <template slot-scope="scope">
          {{ scope.row.userSex == 1 ? '男' : scope.row.userSex == 2 ? '女' : '未知' }}
        </template>
      </el-table-column>
      <el-table-column
          width="180px"
          prop="userBirthday"
          label="生日">
      </el-table-column>
      <el-table-column
          prop="userAge"
          label="年龄">
      </el-table-column>
      <el-table-column
          width="180px"
          prop="userEmail"
          label="邮箱">
      </el-table-column>
      <el-table-column
          prop="registeredCity"
          label="注册时所在城市">
      </el-table-column>
      <el-table-column
          prop="administrativeRegion"
          label="注册时所在行政区">
      </el-table-column>
      <el-table-column
          width="180px"
          prop="loginTime"
          label="最近一次登录时间">
      </el-table-column>
      <el-table-column
          width="180px"
          prop="registrationTime"
          label="注册时间">
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      formInline: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: []
    }
  },
  methods: {
    findPage1() {
      this.formInline = {};
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.findPage();
    },
    findPage() {
      axios.post(`http://localhost:9999/api-function/driver/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.formInline).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        console.log(this.tableData);
      })
    }
  },
  created() {
    this.findPage();
  }
}
</script>
<style scoped>

</style>
